<!--
 * @Description: 订单信息页面
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-04-02 22:52:07
 * @LastEditors: Yuanjy
 * @LastEditTime: 2020-06-09 23:05:26
 -->
<template>
  <div>
    <el-tabs v-model="activeName" class="service">
      <el-tab-pane label="服务订单信息" name="service">
        <div style="position:absolute;right:0;z-index:1000"> 
          <el-button v-if="!isModifyService" type="primary" size="mini" key="1" @click="isModifyService = true"> 修改 </el-button>
          <el-button v-if="isModifyService" type="danger" size="mini" key="2" @click="isModifyService = false"> 确认 </el-button>  
        </div>
        <el-form label-position="right" label-width="120px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="负责人：">
                <span v-html="service.wwx_name" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收货人姓名：">
                <span v-if="!isModifyService" v-html="service.delivery_name" />
                <el-input v-else v-model="service.delivery_name" type="text" size="mini" placeholder="收货人姓名" style="width:60%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="微信昵称：">
                <span v-if="!isModifyService" v-html="service.nick_name" />
                <el-input v-else v-model="service.nick_name" type="text" size="mini" placeholder="微信昵称" style="width:60%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="微信号：">
                <span v-if="!isModifyService" v-html="service.wechat_id" />
                <el-input v-else v-model="service.wechat_id" type="text" size="mini" placeholder="微信号" style="width:60%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系电话：">
                <span v-if="!isModifyService" v-html="service.phone" />
                <el-input v-else v-model="service.phone" type="text" size="mini" placeholder="联系电话" style="width:60%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单号：">
                <span v-if="!isModifyService" v-html="service.order_id" />
                <el-input v-else v-model="service.order_id" type="text" size="mini" placeholder="订单号" style="width:60%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="外部编号：">
                <span v-if="!isModifyService" v-html="service.external_number" />
                <el-input v-else v-model="service.external_number" type="text" size="mini" placeholder="外部编号" style="width:60%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单类型：">
                <span v-if="!isModifyService" v-html="service.order_type_text" />
                <el-select v-else v-model="service.order_type" size="mini" placeholder="" class="user-input">
                  <el-option v-for="(item, index) in orderTypes" :key="index" :label="item" :value="index" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <!-- <el-form-item label="SKU类型：">
                <span v-if="!isModifyService" v-html="service.sku_type" />
                <el-select v-else v-model="service.sku_type" placeholder="" class="user-input" @change="changeSkutype">
                  <el-option v-for="item in sku_types" :key="item.key" :label="item.key" :value="item.key" />
                </el-select>
              </el-form-item> -->
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户来源：">
                <span v-if="!isModifyService" v-html="service.from" />
                <el-cascader v-else v-model="channel_codes" :options="secondChannels" expand-trigger="hover" class="user-input" clearable placeholder="请选择渠道" size="mini" @change="channelChange" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <!-- <el-form-item label="宝贝描述：">
                <span v-if="!isModifyService" v-html="service.content" />
                <el-select v-else v-model="service.content" filterable placeholder="宝贝描述" class="user-input" @change="changeSkuname">
                  <el-option v-for="item in sku_details" :key="item.key" :label="item.key" :value="item.key" />
                </el-select>
              </el-form-item> -->
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否VIP：">
                <div v-if="!isModifyService">
                  <span v-if="service.is_vip === 2">是</span>
                  <span v-else>否</span>
                </div>
                <el-select v-else v-model="service.is_vip" size="mini" placeholder="是否VIP" class="user-input">
                  <el-option v-for="item in vip" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <!-- <el-form-item label="宝贝价格：">
                <span v-if="!isModifyService" v-html="service.price" />
                <el-select v-else v-model="service.price" placeholder="价格" class="user-input">
                  <el-option v-for="item in sku_prices" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item> -->
            </el-col>
            <el-col :span="12">
              <el-form-item label="营销方式：">
                <span v-if="!isModifyService" v-html="service.mkt_form_name" />
                <el-select v-else v-model="service.mkt_form" size="mini" placeholder="营销方式" class="user-input">
                  <el-option v-for="item in service.mkt_list" :key="item.key" :label="item.value" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="序号：">
                <span v-if="!isModifyService" v-html="service.number" />
                <el-input v-else v-model="service.number" type="text" size="mini" placeholder="序号" style="width:60%" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="接单时间：">
                <span v-if="!isModifyService" v-html="service.order_time" />
                <el-date-picker v-else v-model="service.order_time" type="date" size="mini" placeholder="选择日期" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单上传时间：">
                <span v-html="service.real_created_at" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商品留言：">
                <span v-html="service.goods_message" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单留言：">
                <span v-html="service.order_message" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="宝贝详情：">
                <span v-if="!isModifyService" v-html="service.goods_info" />
                <el-input v-else v-model="service.goods_info" type="text" size="mini" placeholder="宝贝详情" style="width:60%" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
      <!-- 源订单信息 -->
      <el-tab-pane label="源订单信息" name="order" class="order">
        <div style="position:absolute;right:0;z-index:1000"> 
          <el-button v-if="!isModifyOrder" type="primary" size="mini" key="3" @click="isModifyOrder = true"> 修改 </el-button>
          <el-button v-if="isModifyOrder" type="danger" size="mini" key="4" @click="isModifyOrder = false"> 确认 </el-button>  
        </div>
        <el-form label-position="right" label-width="130px" style="width: 95%; margin-left:0px;">
          <el-row>
            <el-col :span="11">
              <el-form-item label="客户来源：">
                <span v-if="!isModifyOrder" v-html="order.channel_code" />
                <treeselect v-else v-model="order.channel_code" :options="secondChannels" :flatten-search-results="true" :disable-branch-nodes="true" placeholder="请选择渠道" />
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-form-item label="SKU类型：">
                <span v-if="!isModifyOrder" v-html="order.sku_type" />
                <el-select v-else v-model="order.sku_type" filterable placeholder="SKU类型" size="mini" class="input-costum" @change="changeSkuType">
                  <el-option v-for="item in skus" :key="item.key" :label="item.key" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="宝贝描述：">
                <span v-if="!isModifyOrder" v-html="order.goods_info" />
                <el-select v-else v-model="order.goods_info" filterable placeholder="宝贝描述" size="mini" class="input-costum" @change="changeGoodsInfo">
                  <el-option v-for="item in skuGoodsInfos" :key="item.key" :label="item.key" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-form-item label="宝贝价格：">
                <span v-if="!isModifyOrder" v-html="order.price" />
                <el-select v-else v-model="order.price" filterable placeholder="宝贝价格" size="mini" class="input-costum">
                  <el-option v-for="item in goodsInfoPrices" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="收件人：">
                <span v-if="!isModifyOrder" v-html="order.consignee" />
                <el-input v-else v-model="order.consignee" placeholder="收件人" size="mini" class="input-costum" />
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-form-item label="手机号：">
                <span v-if="!isModifyOrder" v-html="order.phone" />
                <el-input v-else v-model="order.phone" placeholder="手机号" size="mini" class="input-costum" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="宝贝标题：">
                <span v-if="!isModifyOrder" v-html="order.goods_title" />
                <el-input v-else v-model="order.goods_title" placeholder="宝贝标题" size="mini" class="input-costum" />
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-form-item label="外部采购编号：">
                <span v-if="!isModifyOrder" v-html="order.external_procure_number" />
                <el-input v-else v-model="order.external_procure_number" placeholder="外部采购编号" size="mini" class="input-costum" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="是否有代餐：">
                <span v-if="!isModifyOrder" v-html="order.with_meal_powder ? '有' : '无'" />
                <el-switch v-else v-model="order.with_meal_powder" active-color="#13ce66" inactive-color="#ff4949" active-text="有代餐" inactive-text="无代餐" active-value="1" inactive-value="0" />
              </el-form-item>
            </el-col>
            <el-col :span="11" :offset="2">
              <el-form-item label="是否VIP：">
                <span v-if="!isModifyOrder" v-html="order.is_vip ? '是' : '否'" />
                <el-switch v-else v-model="order.is_vip" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" active-value="1" inactive-value="0" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="收货地址：">
                <span v-if="!isModifyOrder" v-html="order.delivery_address" />
                <el-input v-else v-model="order.delivery_address" type="textarea" size="mini" placeholder="收货地址" class="user-input" />
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="isModifyOrder" class="empty-10" />
          <el-row>
            <el-col>
              <el-form-item label="买家备注：">
                <span v-if="!isModifyOrder" v-html="order.comments" />
                <el-input v-else v-model="order.comments" type="textarea" size="mini" placeholder="买家备注" class="user-input" />
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="isModifyOrder" class="empty-10" />
          <el-row>
            <el-col>
              <el-form-item label="系统备注：">
                <span v-if="!isModifyOrder" v-html="order.memo" />
                <el-input v-else v-model="order.memo" type="textarea" size="mini" placeholder="系统备注" class="user-input" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>

export default {
  data() {
    return {
      activeName: 'service',
      isModifyService: false,
      isModifyOrder: false,
      service: {},
      order: {}
    }
  },
  methods: {
    initData(serviceId) {
      this.$api.order.service
        .info(serviceId)
        .then(res => {
          this.service = res.data.service
        }).catch(err => {
          console.log(err)
        })

      this.$api.order.origin
        .detail(serviceId)
        .then(res => {
          if (res.data !== null) {
            this.order = res.data
          }
        }).catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style>
.service .el-form-item {
  margin-bottom: 0px;
}
.service .el-form-item__label {
  font-weight: 600;
}
</style>
